🤯 MEDIA QUERIES en RESPONSIVE WEB DESIGN 🚀 | Eduardo Fierro Pro
HTML-код
- Опубликовано: 12 авг 2024
- 👉Hoy nos toca ver TODO lo relacionado con las MEDIA QUERY o MEDIA QUERIES: Desde que es una media query o media queries hasta cómo se escribe una media query, que hace @media en CSS, que es el media screen y cómo se usa una media query y te cuento trucos para hacer una web Responsive.
🔖 TODOS los vídeos de esta SERIE:
• 🚀 TODO sobre RESPONSIV...
✓ Breakpoints en Responsive Design • ✅ BREAKPOINTS RESPONSI...
✓ TEORIA sobre MEDIA QUERIES en 2021 • 🤯 MEDIA QUERIES en RES...
✓ CÓMO hacer MEDIA QUERIES EN CSS • 🔴CÓMO hacer MEDIA QUER...
Si te ha gustado el vídeo dale a like, suscríbete y ¡dale a la campanita! 😊
_______
📹Otros vídeos de mi canal
😊 Vídeos recomendados • 👉Vídeos recomendados
🚀ROADMAP Desarrollo WEB • 🔎ROADMAP de un DESARRO...
🤯 Explicando Web de forma diferente • 😱Explicando conceptos:...
🙇🏻 Construyendo un Slider, Acordeón, Tabs... • 🤯 Construyendo un Carr...
_______
📚¿Estás buscando un Curso, Máster o Bootcamp sobre desarrollo web?
Soy profesor en la escuela CEI donde imparto Cursos y Másters sobre desarrollo web donde puedes obtener un descuento del 5% en el precio del curso usando el código embajador.eduardofierro
¡Pide información sobre los cursos donde soy profesor desde este enlace!
👉cei.es/?ref=eduardofierropro
_______
✅ Directos en Twitch: / eduardofierropro
✓ ¡Apóyame en RUclips! ruclips.net/user/EduardoFierro...
✓ Trucos rápidos en TikTok / eduardofierro.pro
✓ Podcast sobre desarrollo web anchor.fm/eduardofierropro
✓ Programación en Instagram / eduardofierro.pro
✓ Códigos para descargar en Github github.com/eduardofierropro
✓ Noticias sobre web en Twitter / 1325827794627129344
✓ Mi web eduardofierro.pro
_______
🔥Enlaces a productos de mi setup
🖥 Samsung Space Monitor 27" amzn.to/3mABk0R
🖥 LG Ultrawide 25" amzn.to/3XrMwOp
💪 Brazo EarGear amzn.to/3YPPnBF
🖥 Mac Studio M1 Max amzn.to/3xlwqez
💻 MacBook Pro 15" 2019 amzn.to/2XEdeGL
⚡️ Mesa elevable Flexispot amzn.to/3xlwqez
⌨️ HHKB Hybrid Type-S amzn.to/3xlwqez
⌨️ Logitech G915 amzn.to/2Tzy1da
🖱 Logitech MX Master 2 amzn.to/2WZlUZa
💡 Elgato Key Light Air amzn.to/2TzxPus
💡 Elgato Right Light amzn.to/3tWoM62
🎛 Elgato Stream Deck XL amzn.to/3d1cy4n
🎙 Elgato Wave 3 amzn.to/2QsPLbU
🎙 Elgato Wave Pop Filter amzn.to/33ONkU1
✔️ Elgato Soporte Teléfono amzn.to/2RTZatj
🎧 Beats Wireless Studio 3 amzn.to/3YOtDWT
✔️ Corsair ST100 RGB premium amzn.to/3d3hiZY
📱 iPhone 13 Pro amzn.to/3lsPRPI
📱 Motorola G amzn.to/2TzYcjO
📱 Samsung M11 amzn.to/3uTwNKh
🪑 Drift dr500bamzn.to/3kaEHtE
Enlaces en los productos en mi web: eduardofierro.pro/workspace
______
Psss... Si has llegado hasta aquí eres un auténtico CRUCK de la vida. ¿Vemos cuántos somos poniendo "de frontends!!" en los comentarios? 😏
______
Capítulos:
00:00 Introducción
00:27 Lo esencial de las media queries
01:31¿Que es una media query?
02:21 ¿Cómo se escribe una media query?
03:33 ¿Qué hace @media en CSS?
04:29 ¿Qué es el media screen?
05:45 ¿Cómo funciona el @media?
07:01 ¿Cómo se usa una media query?
07:55 ¿Cómo usar el @media en HTML?
08:35 ¿Cómo poner media en picture?
09:25 ¿Qué es una etiqueta meta viewport?
09:58 Trucos para hacer una web Responsive
11:07 ¿Cómo comprobar mi diseño responsive?
11:39 ¿Cómo probar responsive en Chrome?
12:00 ¿Cómo probar mi web en el móvil?
![🔴POSITION en CSS [GUÍA COMPLETA] en ESPAÑOL 🔴 Eduardo Fierro Pro](http://i.ytimg.com/vi/FLet5o2ecE8/mqdefault.jpg)
![🔴POSITION en CSS [GUÍA COMPLETA] en ESPAÑOL 🔴 Eduardo Fierro Pro](/img/tr.png)
✓ Breakpoints en Responsive Design ruclips.net/video/_ESkNVyXjdY/видео.html
✓ TEORIA sobre MEDIA QUERIES en 2021 ruclips.net/video/LPPXvRImbZE/видео.html
✓ CÓMO hacer MEDIA QUERIES EN CSS ruclips.net/video/qzyW_Zf0bbk/видео.html
🔥 CONSTRUYE tu PORTAFOLIO de DESARROLLADOR WEB 👉 ruclips.net/p/PLJpymL0goBgELkXg-XumuHwS_jijzosF8
🙀 ROADMAP de un DESARROLLADOR WEB 👉 ruclips.net/p/PLJpymL0goBgFzvCuhEJJ29-x1H_Uo5Esv
¡Dale a like y suscríbete si te ha gustado! 😊
Reportándome por aquí
Genial la manera y el diseño a la hora de explicar. Por más vídeos así por favor 🙏💪💪
este video es maravilloso! muchas gracias!
Que grande eres , gracias por hacer contenido de este tipo, a mi me estás ayudando mucho. 👍🏼
Muchísimas gracias a ti por el apoyo Angel!! 😊
Tienes vídeos muy buenos. No te complicas explicando mil cosas a la vez, sino realmente lo necesario e importante, me subscribo :D
Muchas gracias EsTV Rank!! 😊
Eduardo que buen canal, aportas mucho valor, me ayudas mucho a entender mejor CSS, Mil gracias Crack! Nuevo Sub .
Muchísimas gracias por suscribirte Sebastian!! 😊
muy buen video. Quiero ver mas
Gracias por compartir tu conocimiento crack! Te mereces más seguidores!!
Muchas gracias F3RC40!! Si el contenido gusta y se comparte llegarán! 😊
Exelente me gusto así de rápido y preciso un suscriptor mas saludos y éxitos crack
Muchas gracias LINCOLN! 😊
Me suscribo !
Muchas gracias, de verdad muchas gracias por tomarte el trabajo de hacer los videos con esta info y subirlos. Soy programador en formación y el responsive es algo que se me había hecho muy difícil de comprender hasta este momento, la explicación ha sido fenomenal.
Saludos desde Medellín - Colombia !
Me alegro mucho Edwin!! Ahora a practica a fuego! 😊
Excelente contenido
muchisimas gracias por tus videos estan expectaculares, me puedes decir si hicistes el video de las imagenes por fa? gracias...
wow! saludos desde mexico! me sorprende que no tengas mas seguidores! Felicidades por tu trabajo tan excelente!
Muchas gracias por tu apoyo Raul! Vamos poco a poco 😊
Buena serie bro :'3 estaba retocando mi página y se rompió xD es que solo tenía 2 breakpoints, y me doy cuenta que necesito más para que se vea correcto en distintos dispositivos :3
Vaya currada tecnica de videos q te has marcado, muy bueno y ahora la duda en Vs code q es mejor el plugin oficial live server de microsoft o el liveServer q se instala la mayoria ese del logo verde, thanks
Muchas gracias por las explicaciones tan claras Eduardo! ya estaba enloqueciendo con el responsive design. Estoy ingresando a este mundo de la programación de a poco y la explicación que me había dado mi profesora sobre el tema, me dejó muchas dudas y pocas certezas, ahora comprendí mucho mejor.
Pues espero que ahora te resulte más fácil y con los conceptos más claros! Muchas gracias Ana!! 😊
Que bien explicas, gracias por compartir tu conocimiento . Saludos de Argentina!!!
Me alegra que te sirva la explicación!! Muchas gracias por el apoyo Ivar! 😊
Tremendo!!! eres un crack!
Tú si que eres un crack 😊
Excelente información #crack Gracias por el contenido..
Muchas gracias Andrés!! 😊
Muchas gracias por la explicación Eduardo
Gracias a ti Hector por el comentario 😊
Que buen video. Que Dios te bendiga!!
Muchas gracias David!! 😊
Excelente video y contenido en general. Tengo una duda, en lo personal me gusta realizar los media queries en una hoja aparte del css por temas de comodidad, podrías decirme si es algo recomendable o no, o si da igual y no influye en nada hacer esto?, saludos y gracias de antemano
Muchas graciasss
Muchas gracias a tí por el comentario y el apoyo Jose 😊
Reportandome jejeje saludos
Creo que soy muy boomer 😅 qué significa? 😗
@@EduardoFierroPro jejeje profe reportandome significa que estoy presente en la clase como cuando te llaman a lista en el colegio
@@EduardoFierroPro y no eres boomer solo que soy de colombia y aqui se maneja un jerga mas distinta para expresarce
reportándome por aquíí!!
@@Cibergroup Aaaah pueees te digo que ya no tienes la falta de clase 😏
12:15 eso es cierto, ayer subí un pequeño proyecto a modo de prueba a la web, y me di con la sorpresa de que las letras se veían muy pequeñas y una parte del media query no funcionaba.
Gracias!
A tí Dhannibel Reyes! 😊
@@EduardoFierroPro me sirvió mucho, he visto como 10 videos de media queries, y ninguno me explicaba el porqué aún poniendo bien la sintaxis del media, no me funcionaba cuando probaba con la herramienta de desarrollador del navegador, todo era porque no había puesto “viewport” en la etiqueta meta.
Me gustaría tener un contacto más cercano contigo.
muy bien explicado el video, pero tengo una pequeña duda , en el momento que estabas explicando en como usar media query en la parte donde suscribes el codigo vi que colocaste .h2 y lo que me han enseñado que las etiquetas no llevan puntos, solamente las clases o los id, por fa me quitarias esa duda.ya que estoy en aprendizaje y quiero tener todo bien claro . muchas gracias.
Hola Eduardo una pregunta, es necesario usar mediaquery para monitores mas grandes o solo en teléfonos móviles??
Una duda entonces hoy en día cuales serian los puntos de quiebre que tendría un proyecto web con vista para moviles?
Yo recomiendo colocar los media queris debajo de cada selector, clase, etc. asi no tengo que subir y bajar todo mi documento. ademas que le da mas sentido
Es otra forma y muy utilizada también! Yo uso SASS y un mixin que al compilarse genera el @media debajo del selector como cuento aquí 😊👉 ruclips.net/video/-VJfeNL-VH0/видео.html
@@EduardoFierroPro lo veré :) Y por cierto felicitaciones, tus videos son de demasiada ayuda :D
hable del font-face
ayer aprendí lo de @font-face y luego comentas lo de display swap carga default... tienes video del tema? :) gracias
Aún no tengo vídeo pero se vendrá!! 😊
Buenas mi pagina web se ve perfecta en modzilla pero al visualizarla en crhome el grid y algunos modulos se estiran y bugean , he buscado pero no encuentro nada concreto que me oriente para darcon la causa y poder solucionarlo , intuyo que puede ser alguna incompatibilidad de alguna sintaxis o tecnologia como grid o alguna carachteristica de las mismas , te agradeceria la ayuda , un saludo cruck ;).
Genial eh 😊
Muchas gracias cesar! 😊
Muy buen video con contenido completo, claro y directo.
Como dice el amigo F3RC4O poco se te conoce para las curradas que te pegas 🙄
Por cierto, ya he visto los otros videos que recomiendas y no creo que con el pelo largo parezcas un Backstreet Boy 🙄 ahora, Backstreet Girl...🤔 sí 😬🤣
Muchas gracias Jorge!!! 😊😊 con respecto al pelo largo …. 😂😂
@@EduardoFierroPro ha sido un placer... guapetona 💁🏻♀️🤣
Vaya, que lo de la prueba real si que es todo una odisea, estoy sufriendo un poco con el responsive porque no solo basta esa prueba de emulación con el navegador (ahí pintaba todo bien), si no también el uso de diversos navegadores móviles... Hoy me percate que que mi proyecto en el lavegador de duckduck, se ve tal cual lo diseñe, pero me dió curiosidad de verlo en Chrome, en el navegador por defecto del móvil, brave y firefox y vaya desastre se me ah liado .-. Además tengo dos monitores que aparentemente son de la misma resolución (1366*720) y en un monitor se ve bien y cuando la paso al secundario que se ah comido algunos trozos de padding tsss luego me prestan otro móvil y que le falta espacio por rellenar eh intentado poner diversos break points pero no han sido suficientes, son un montón .-. intentaré en práctica lo de min-height, en fin solo quería liberar mi frustración me ah servido :')
Saludos, es posible hacer responsive sin usar @media ? Y como se podría hacer.
Buenas crack!! Pues dependiendo de dónde quieras aplicarlo: tipografía, cajas... hay varias técnicas tanto en Grid como en textos... 😊
Haz un vídeo sobre imágenes Bro
Justo explico imágenes Responsive aquí 👉ruclips.net/video/qzyW_Zf0bbk/видео.html
¿que dices en la intro? groups?
digo crucks! xD
@@EduardoFierroPro jaja significa como amigos? Oye muy buenos tus vídeos, se aprende mucho a un muy buen ritmo, a un ritmo ideal donde uno no se aburre ni se pierde, muchas gracias por todo tu esfuerzo ^^
Hola Eduardo, me gustan tus vídeos y agradezco tu información. Lo único que no me gusta del canal es que cuando dices "este es el segundo de tres vídeos..." no me es fácil encontrar los otros dos. Dices que dejas enlaces pero no me es fácil reconocerlos o no los veo porque tienes demasiados links y me dispersa un poco. Solo hago este comentario por ayudar o que me ayudes a facilitar esto, muchas gracias y es con todo mis respetos.
Hola Johana, tienes toda la razón. Pienso en actualizarlo pero después de me olvida.
Mañana corrijo los enlaces de los vídeos y aviso por un comentario aquí 😊 gracias por el comentario!
Ya están revisados casi todos los vídeos del canal y he puesto tarjetas y en las descripciones los enlaces a las listas de reproducción 😊
@@EduardoFierroPro muchas gracias, espero que te siga yendo genial. Eres muy amable 🤗👏👏👏👏y tu contenido muy didáctico 💪👍👏👏
Muchas gracias a ti! Ahora revisaré algunos vídeos por si me he dejado algo. Un saludo! 😊
Haga el vídeo del @font-face